<!--
 * @Author: cgl
 * @Date: 2023-05-18 15:05:41
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-01 17:53:33
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\views\workflow\print.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <div class="app-container">
    <div class="content">
      <box
        :width="width"
        :height="height"
        :textAlign="textAlign"
        :showTextList="showTextList"
        :showPicList="showPicList"
        :qrcodeWidth="qrcodeWidth"
        :qrcodeHeight="qrcodeHeight"
        :barcodeGap="barcodeGap"
        :barcodeHeight="barcodeHeight"
        :qrcodeInfo="qrcodeInfo"
        :barcodeInfo="barcodeInfo"
        :barcodeBit="barcodeBit"
        :displayValue="displayValue"
        :barcodeType="barcodeType"
        class="fbox"
        ref="fbox"
      >
      </box>
    </div>

    <div class="option">
      <div class="option-item">
        <div class="innertitle">区域</div>

        宽(mm)：
        <el-input-number
          size="mini"
          v-model="width"
          :precision="1"
          :step="0.1"
          :min="0"
          style="margin-right: 20px"
        >
        </el-input-number>

        高(mm)：
        <el-input-number
          size="mini"
          v-model="height"
          :precision="1"
          :step="0.1"
          :min="0"
        >
        </el-input-number>
      </div>

      <div class="option-item">
        <div class="innertitle">
          文字

          <div style="margin-left: 30px; display: inline-block; float: right">
            <el-radio v-model="textAlign" label="left">左对齐</el-radio>
            <el-radio v-model="textAlign" label="right">右对齐</el-radio>
          </div>
        </div>
        <el-checkbox-group
          v-model="vmTextList"
          @change="changeShowTextList"
          class="showText"
        >
          <el-checkbox
            v-for="(item, index) in textList"
            :key="index"
            :label="item.value"
          >
            {{ item.label }}
            <div class="fontsize" @click.stop.prevent>
              字号：
              <el-input-number
                size="mini"
                v-model="item.fontsize"
                :min="1"
                :max="20"
              >
              </el-input-number>
              水平偏移量：
              <el-input-number
                size="mini"
                v-model="item.offsetX"
                :precision="1"
                :step="0.1"
                :min="-20"
                :max="20"
              >
              </el-input-number>
              垂直偏移量：
              <el-input-number
                size="mini"
                v-model="item.offsetY"
                :precision="1"
                :step="0.1"
                :min="-20"
                :max="20"
              >
              </el-input-number>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="option-item">
        <div class="innertitle">图形</div>

        <!-- 二维码 -->
        <el-radio
          v-model="vmPic"
          label="二维码"
          @click.native.prevent="clickradio('二维码')"
        ></el-radio>
        <div class="codeinfo">
          宽(mm)：
          <el-input-number
            size="mini"
            v-model="qrcodeWidth"
            :disabled="vmPic != '二维码'"
            :precision="1"
            :step="0.1"
            :min="1"
            :max="width"
            style="margin-right: 20px"
          >
          </el-input-number>
          高(mm)：
          <el-input-number
            size="mini"
            v-model="qrcodeHeight"
            :disabled="vmPic != '二维码'"
            :precision="1"
            :step="0.1"
            :min="1"
            :max="height"
          >
          </el-input-number>
          <br />
          信息字段：
          <el-input
            class="infoinput"
            size="mini"
            v-model="qrcodeInfo"
            :disabled="vmPic != '二维码'"
            placeholder="请输入"
          />
          <el-button
            :disabled="vmPic != '二维码'"
            type="primary"
            plain
            size="mini"
            @click="updateInfo('二维码')"
            >确定</el-button
          >
        </div>

        <!-- 条形码 -->
        <el-radio
          label="条形码"
          v-model="vmPic"
          @click.native.prevent="clickradio('条形码')"
        ></el-radio>

        <div class="codeinfo">
          间隙(mm)：
          <el-input-number
            size="mini"
            v-model="barcodeGap"
            :disabled="vmPic != '条形码'"
            :precision="1"
            :step="0.1"
            :min="0.2"
            style="margin-right: 20px"
          >
          </el-input-number>
          高(mm)：
          <el-input-number
            size="mini"
            v-model="barcodeHeight"
            :disabled="vmPic != '条形码'"
            :precision="1"
            :step="0.1"
            :min="0.1"
            :max="height"
          >
          </el-input-number>
          <br />
          位数：
          <el-input-number
            size="mini"
            v-model="barcodeBit"
            :disabled="vmPic != '条形码'"
            :min="1"
          >
          </el-input-number>
          <el-checkbox
            :disabled="vmPic != '条形码'"
            v-model="displayValue"
            style="margin-left: 20px"
            >显示信息</el-checkbox
          >
          <br />
          编码类型：
          <el-select
            v-model="barcodeType"
            size="mini"
            style="margin-bottom: 20px"
            :disabled="vmPic != '条形码'"
          >
            <el-option
              v-for="item in barcodeTypeList"
              :label="item"
              :value="item"
              :key="item"
            >
            </el-option>
          </el-select>
          <br />
          信息字段：
          <el-input
            class="infoinput"
            size="mini"
            v-model="barcodeInfo"
            :disabled="vmPic != '条形码'"
            placeholder="请输入"
          />
          <el-button
            type="primary"
            :disabled="vmPic != '条形码'"
            plain
            size="mini"
            @click="updateInfo('条形码')"
            >确定</el-button
          >
        </div>
      </div>

      <el-button type="primary" plain size="mini" @click="handlePrint()"
        >打印</el-button
      >
    </div>
  </div>
</template>

<script>
import box from "./box.vue";

export default {
  name: "print",
  components: {
    box,
  },
  data() {
    return {
      textList: [
        /* 可展示的文字列表 */
        {
          label: "姓名",
          value: "name",
          fontsize: 12,
          offsetX: 0,
          offsetY: 0,
          id: "1",
        },
        {
          label: "部门",
          value: "dept",
          fontsize: 12,
          offsetX: 0,
          offsetY: 0,
          id: "2",
        },
        {
          label: "编号",
          value: "number",
          fontsize: 12,
          offsetX: 0,
          offsetY: 0,
          id: "3",
        },
        {
          label: "地址",
          value: "address",
          fontsize: 12,
          offsetX: 0,
          offsetY: 0,
          id: "4",
        },
        {
          label: "时间",
          value: "time",
          fontsize: 12,
          offsetX: 0,
          offsetY: 0,
          id: "5",
        },
      ],
      picList: ["二维码", "条形码"],
      vmTextList: [] /* 选择的文字列表 */,
      vmPic: null /* 选择的图片列表 */,
      width: 50 /* 区域大小 mm */,
      height: 30,
      qrcodeWidth: 12 /* 二维码大小 mm */,
      qrcodeHeight: 12,
      barcodeGap: 0.1 /* 条形码大小 mm */,
      barcodeHeight: 10,
      arrDPI: [] /* 屏幕dpi */,
      textAlign: "left",
      qrcodeInfo: "二维码信息",
      barcodeInfo: "123",
      barcodeBit: null,
      displayValue: true,
      barcodeTypeList: [
        "CODE128",
        "EAN",
        "CODE39",
        "ITF",
        "MSI",
        "Pharmacode",
        "Codabar",
      ],
      barcodeType: "CODE128",
    };
  },
  computed: {
    showTextList() {
      return this.textList.filter(
        (item) => this.vmTextList.indexOf(item.value) != -1
      );
    },
    showPicList() {
      return this.picList.filter((item) => this.vmPic == item);
    },
  },
  methods: {
    // 更改选择的文字
    changeShowTextList(val) {
      console.log("更改展示的文字", val, this.showTextList);
    },
    // 更改选择的图片
    changeShowPicList(val) {
      if (val == "二维码") {
        this.qrcodeWidth = 100;
        this.qrcodeHeight = 100;
      }
      if (val == "条形码") {
        this.qrcodeWidth = 50;
        this.qrcodeHeight = 50;
      }
    },
    // 单击取消图片
    clickradio(item) {
      this.vmPic = item == this.vmPic ? null : item;
    },
    updateInfo(type) {
      this.$refs.fbox.createCode(type);
    },
    // 打印编号
    handlePrint() {
      this.$refs.fbox.handlePrint1();
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  background-color: #ffffff;
}
.content {
  border-right: 1px solid #999;
  height: 700px;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  .fbox {
    margin-bottom: 100px;
  }
}
.option {
  height: 700px;
  width: 60%;
  padding: 30px;
  font-size: 14px;
  overflow: auto;
  &-item {
    margin-bottom: 30px;
    .title {
      margin-bottom: 20px;
    }
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      label {
        margin-bottom: 20px;
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
      }
    }
    .sizeInput {
      width: 30%;
      margin-bottom: 20px;
      display: inline-block;
    }
    .padding {
      width: 50%;
      display: inline-block;
      .el-input-number {
        width: 70%;
      }
    }
  }
  .fontsize {
    display: inline-block;
    margin-left: 30px;
    color: #606266;
    .el-input-number {
      width: 100px;
    }
  }
}
.codeinfo {
  margin-top: 10px;
  color: #606266;
  .el-input-number {
    margin-bottom: 20px;
  }
  .infoinput {
    width: 300px;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 30px;
  }
}
.innertitle {
  position: relative;
  color: #252d57;
  font-weight: bold;
  padding-left: 15px;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 20px;
  &::before {
    content: "";
    width: 5px;
    height: 100%;
    background-color: #2a72ee;
    border-radius: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>
